<template>
  <div class="UserInfos">
    <!-- 顶部标题 -->
    <top-title-bar>
      <template #left>
        <div class="left" @click="userInfosNotShow">
          <span class="iconfont icon-xiangzuo1"></span>
          <div class="title">个人信息</div>
        </div>
      </template>
      <template #right>
        <div class="right">
          <span class="iconfont icon-bianji1" v-show="false"></span>
          <span
            class="iconfont icon-xiaoxi"
            @click="$router.push('/MsgView')"
          ></span>
        </div>
      </template>
    </top-title-bar>
    <div class="wrap" v-if="userinfo">
      <img class="bg" :src="userinfo.space.imgurl" alt="" />
      <main>
        <div class="box">
          <div class="name-icon">
            <!-- - 左边 -->
            <div class="left">
              <!-- - 图片 -->
              <div class="icon" @click="ImagePreviewFun([userinfo.avatar], 0)">
                <img :src="userinfo.avatar" alt="" />
              </div>
            </div>

            <!-- - 右边 -->
            <div class="right">
              <div class="text">
                <h4>{{ userinfo.nick }}</h4>

                <div class="level">
                  <p>
                    <span>Lv {{ userinfo.level }}</span>
                  </p>
                  <p>
                    <span
                      :class="[
                        'iconfont',
                        userinfo.gender == 2 ? 'icon-nan' : 'icon-nv',
                      ]"
                      >{{ userinfo.age }}</span
                    >
                  </p>
                </div>

                <div class="money">
                  <span>{{ userinfo.integral }}</span
                  >贡献值<span>{{ userinfo.credits }}</span
                  >葫芦
                </div>
              </div>
            </div>
          </div>

          <div class="num">
            <a
              @click.prevent="
                $router.push(
                  '/MyPost?start=0&count=20&active=0&user_id=' + userinfo.userID
                )
              "
              href=""
              target="_blank"
            >
              <p>{{ userinfo.postCount }}</p>
              <small>帖子</small>
            </a>

            <a
              href=""
              target="_blank"
              @click.prevent="$router.push('/PersonList?active=0')"
            >
              <p>{{ userinfo.followingCount }}</p>
              <small>关注</small>
            </a>

            <a
              href=""
              target="_blank"
              @click.prevent="$router.push('/PersonList?active=1')"
            >
              <p>{{ userinfo.followerCount }}</p>
              <small>粉丝</small>
            </a>

            <router-link
              tag="a"
              :to="
                '/ReplyView?&start=0&count=20&active=1&user_id=' +
                userinfo.userID
              "
            >
              <p>{{ userinfo.gameCommentCount }}</p>
              <small>游评</small>
            </router-link>

            <router-link
              tag="a"
              :to="
                '/ReplyView?&start=0&count=20&active=0&user_id=' +
                userinfo.userID
              "
            >
              <p>{{ userinfo.commentCount }}</p>
              <small>回复</small>
            </router-link>

            <router-link
              tag="a"
              :to="'/CollectionView?user_id=' + userinfo.userID"
              href=""
            >
              <p>{{ userinfo.favoriteCount }}</p>
              <small>收藏</small>
            </router-link>
          </div>
        </div>

        <div class="box">
          <div class="head">
            <h4>我的照片</h4>
          </div>

          <div class="body">
            <div class="imgs">
              <div
                class="img"
                @click.stop="
                  ImagePreviewFun(
                    userinfo.photos.map((item) => item.url),
                    i
                  )
                "
                v-for="(img, i) in userinfo.photos"
                :key="img.url"
              >
                <img :src="img.url" alt="" />
              </div>
            </div>
          </div>
        </div>

        <div class="box">
          <div class="head">
            <h4>个人信息</h4>
          </div>
          <div class="body">
            <div class="info">
              <p>
                签名<span>{{
                  userinfo.signature
                    ? userinfo.signature
                    : "因为个性所以没有签名"
                }}</span>
              </p>
              <p>
                家乡<span
                  >{{
                    userinfo.hometown.hometown_province
                      ? userinfo.hometown.hometown_province
                      : "无"
                  }}
                  -
                  {{
                    userinfo.hometown.hometown_city
                      ? userinfo.hometown.hometown_city
                      : "无"
                  }}</span
                >
              </p>
              <p>
                学校<span>{{
                  userinfo.schoolInfo.school_name
                    ? userinfo.schoolInfo.school_name
                    : "填写学校 发现校友"
                }}</span>
              </p>
            </div>

            <div class="node-place">
              <div>去过的地方 <span>0</span></div>
              <div>标签 <span>0</span></div>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import TopTitleBar from "../components/TopTitleBar.vue";
import { ImagePreview } from "vant";
export default {
  props: ["isOk"],
  data() {
    return {
      userinfo: null,
    };
  },
  methods: {
    userInfosNotShow() {
      this.$emit("user-infos-not-show");
    },

    // 图片预览
    ImagePreviewFun(images, startPosition) {
      ImagePreview({ images, startPosition });
    },
  },
  components: {
    TopTitleBar,
  },
  watch: {
    isOk(val) {
      if (this.userinfo == null && val) {
        this.userinfo = JSON.parse(localStorage.getItem("userinfo"));
        console.log("副组件 侦听得到本地数据 => userinfo", this.userinfo);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.UserInfos {
  .TopTitleBar {
    ::v-deep header {
      z-index: 18;
      background-image: linear-gradient(transparent, transparent);
    }
    .left {
      display: flex;
      align-items: center;
      .icon-xiangzuo1 {
        font-weight: bold;
        color: #fff;
        font-size: 22px;
      }
    }
    .right {
      .icon-xiaoxi,
      .icon-bianji1 {
        font-weight: bold;
        color: #fff;
        font-size: 22px;
        &.icon-xiaoxi {
          margin-left: 18px;
        }
      }
    }
  }
  .wrap {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

    max-width: 750px;
    min-width: 320px;
    background-color: #fff;
    z-index: 14;

    overflow-y: scroll;
    overflow-x: hidden;

    .bg {
      position: fixed;
      top: 0;
      left: 0;
    }

    main {
      margin-top: 0;
      padding-top: 230px;
      position: relative;
      z-index: 16;
      .box {
        background-color: rgba(255, 255, 255, 0.75);
        margin-bottom: 10px;
        padding: 8px;
        &:nth-child(1) {
          padding: 0;
        }
        .img {
          width: 83px;
          height: 83px;
          border-radius: 5px;
          overflow: hidden;
          margin-right: 8px;
        }
      }
      .name-icon {
        display: flex;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        padding: 0 13px;
        .icon {
          width: 61px;
          height: 61px;
          margin-right: 10px;
          img {
            position: relative;
            border-radius: 5px;
            bottom: 9px;
          }
        }
        h4 {
          height: 32px;
          line-height: 32px;
          color: #1c1c1c;
        }
        .level {
          height: 16px;
          line-height: 16px;
          text-align: center;
          color: #f4fefa;
          font-size: 12px;
          display: flex;
        }
        p {
          width: max-content;
          height: 16px;
          background-color: #12d364;
          border-radius: 4px;
          padding: 0 4px;
          span {
            display: inline-block;
            // transform: scale(0.8);
            font-size: 12px;
          }
          &:last-child {
            background-color: #1dc8f0;
            margin-left: 5px;
            &::before {
              content: none;
            }
          }
        }
        .right {
          flex: 1;
        }
        .money {
          height: 22px;
          line-height: 22px;
          color: #656565;
          font-size: 12px;
          margin-top: 14px;
          span {
            color: #1e1e1e;
            margin-right: 5px;
            &:last-child {
              margin-left: 15px;
            }
          }
        }
      }
      .num {
        display: flex;
        flex-wrap: wrap;
        a {
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          width: calc(100% / 3);
          text-align: center;
          height: 53px;
          font-size: 12px;
          position: relative;
          &:active {
            box-shadow: 0 0 53px 0 inset rgba($color: #000000, $alpha: 0.2);
            opacity: 0.9;
          }
          &::after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            right: 0;
            width: 1px;
            height: 14px;
            background-color: #efefef;
          }
          &:nth-child(3n):after {
            content: none;
          }
          p {
            font-size: 14px;
            color: #000;
            margin-bottom: 4px;
          }
          small {
            color: #737373;
          }
        }
      }
      .head {
        h4 {
          height: 38px;
          line-height: 38px;
          color: #282828;
        }
      }
      .imgs {
        display: flex;
      }
      .info {
        p {
          height: 26px;
          line-height: 26px;
          margin-bottom: 3px;
          font-size: 14px;
          color: #868686;
          &:last-child {
            margin-bottom: 0;
          }
          span {
            color: #6a6a6a;
            margin-left: 12px;
          }
        }
      }
      .node-place {
        margin-top: 15px;
        padding-left: 4px;
        div {
          color: #1e1e1e;
          font-size: 15px;
          height: 33px;
          line-height: 33px;
          span {
            color: #00bf3f;
            margin-left: 11px;
          }
        }
      }
    }
  }
}
</style>